<template>
  <div class="scroll-container" id="scrollContainer">
      <div class="scroll-one" id="scrollOne">
        <div v-for="(item,index) of testData" :key='index'>{{item.name}}</div>
      </div>
      <div class="scroll-two" id="scrollTwo">
        <div v-for="(item,index) of testData" :key='index'>{{item.name}}</div>
      </div>
  </div>
</template>
<script>
  export default {
    name: '',
    props: ['scrollData'],
    data() {
      return {
        msg: 'datatest',
        testData: [
          {
            name: 34
          },
          {
            name: 35
          },
          {
            name: 36
          },
          {
            name: 37
          },
          {
            name: 38
          }
        ]
      }
    },
    created() {

    },
    mounted() {
      this.scroll()
    },
    methods: {
      scroll() {
        let scrollContainer = document.getElementById('scrollContainer')
        let scrollOne = document.getElementById('scrollOne')
        let scrollTwo = document.getElementById('scrollTwo')
        let listHeight = scrollOne.offsetHeight
        let wrapHeight = scrollContainer.offsetHeight
        scrollTwo.innerHTML = ''
        if (listHeight > wrapHeight) {
          scrollTwo.innerHTML = scrollOne.innerHTML
          clearInterval(this.timer)
          this.timer = setInterval(function() {
            if (scrollContainer.scrollTop === scrollOne.offsetHeight) {
              scrollContainer.scrollTop = 0
            } else {
              scrollContainer.scrollTop++
            }
          }, 80)
        }
      }
    }
  }
</script>
<style lang="less">
.scroll-container{
  width: 100%;
  height:100%;
  overflow: hidden;
  .scroll-one{
    div{
      height:45px;
      line-height: 45px;
      border-bottom:1px dashed burlywood;
    }
  }
  .scroll-two{
    div{
      height:45px;
      line-height: 45px;
      border-bottom:1px dashed burlywood;
    }
  }
}
</style>

